<div class="main">
    <el-form ref="form" label-width="80px" style="margin-bottom: 20px;">
        <el-form-item label="流通批次">
            <el-select placeholder="请选择" v-model="value">
                <el-option label="全部" value=""></el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <el-row :gutter="30" style="margin-bottom: 20px;">
        <el-col :span="6">
            <div class="static-item">
                <div class="static-item-title">总追溯码数量</div>
                <div class="num">12,560</div>
                <div class="flex" style="width:100%;height:50px;">
                    <span style="margin-right:5px;">周同比</span>
                    <span style="margin-right:15px;"><i class="el-icon-caret-bottom" style="color: #7ecf51"></i>12%</span>
                    <span style="margin-right:5px;">日环比</span>
                    <span><i class="el-icon-caret-bottom" style="color: #7ecf51"></i>12%</span>
                </div>
                <div class="bottom">日均产生码 1,423</div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="static-item">
                <div class="static-item-title">总访问量</div>
                <div class="num">12,560</div>
                <div ref="echartDiv1" style="width:100%;height:50px;"></div>
                <div class="bottom">日访问量 1,423</div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="static-item">
                <div class="static-item-title">已访问追溯码</div>
                <div class="num">12,560</div>
                <div ref="echartDiv2" style="width:100%;height:50px;"></div>
                <div class="bottom">转换率 60%</div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="static-item">
                <div class="static-item-title">扫码成功率</div>
                <div class="num">70%</div>
                <div style="width:100%;height:50px;">
                    <el-progress :show-text="false" :stroke-width="18" :percentage="70" style="line-height: 50px;"></el-progress>
                </div>
                <div class="bottom flex">
                    <span style="margin-right:5px;">周同比</span>
                    <span style="margin-right:15px;"><i class="el-icon-caret-bottom" style="color: #7ecf51"></i>12%</span>
                    <span style="margin-right:5px;">日环比</span>
                    <span><i class="el-icon-caret-bottom" style="color: #7ecf51"></i>12%</span>
                </div>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="30" style="margin-bottom: 20px;">
        <el-col :span="16">
            <div class="echart-item">
                <div class="echart-item-title">访问量</div>
                <div style="text-align: center">
                    <el-radio-group v-model="channel" style="margin-right: 10px;">
                        <el-radio-button label="0">今年</el-radio-button>
                        <el-radio-button label="1">本周</el-radio-button>
                        <el-radio-button label="2">本月</el-radio-button>
                    </el-radio-group>
                    <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" style="vertical-align: middle;">
                    </el-date-picker>
                </div>
                <div style="width: 100%; height:320px" ref="echartDiv3"></div>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="echart-item">
                <div class="echart-item-title">查看次数聚合图</div>
                <div style="width: 100%; height:320px" ref="echartDiv4"></div>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="30" style="margin-bottom: 20px;">
        <el-col :span="16">
            <div class="echart-item">
                <div class="echart-item-title">热点图</div>
                <div style="width: 100%; height:520px" ref="echartDiv5"></div>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="table-item">
                <div class="table-item-title">查看次数排名</div>
                <el-table :data="tableData" class="item-table">
                    <el-table-column prop="field1"></el-table-column>
                    <el-table-column prop="field2" width="120"></el-table-column>
                </el-table>
            </div>
        </el-col>
    </el-row>
</div>